//页面初次加载时先获取到用户信息，展示在页面上
window.onload =async function(){
     const users =await fetchUsers('all')//获得到的用户信息
    renderUsers(users)//给数据，便可渲染页面展示
}
async function fetchUsers(name){  //获取用户信息
    //向后端发送请求获取用户信息
    const res=await fetch(`http://localhost:3003/api/users/?name=${name}`)  //后端提供的接口地址
    const users =await res.json() //解析返回的JSON数据
    // console.log(users.data);//打印拿到的数据
    return users.data  //返回用户信息

}


function renderUsers(user){  //渲染用户信息
    const tbody =document.querySelector('tbody')  //获取tbody标签
    tbody.innerHTML=''//清空表格内容
    for (let i =0;i< user.length;i++){
        const tr=document.createElement('tr')//创建一个tr标签
        tr.innerHTML=`
        <td>${user[i].id}</td>
        <td>${user[i].name}</td>
        <td>${user[i].age}</td>
        <td>${user[i].address}</td>
        `
        tbody.appendChild(tr)//把tr塞到tbody里面
    }
}

//输入姓名，点击查询按钮，查询用户信息
//给按钮添加点击事件
//获取search-container类下面的button按钮
const btn =document.querySelector('.search-container button')//获取搜索按钮
const input = document.querySelector('#nameSerch')//获取input框
btn.addEventListener('click',async()=>{
    //获取输入框的值
    // console.log(input.value);
    //向后端发送请求，将输入框的值作为参数传递给后端
    const users =await fetchUsers(input.value)
    console.log(users);
    renderUsers(users);
})